import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import React, {Component} from 'react'
import LabelWithValue from "../../component/page/mine/income/labelWithValue";
import styles, {border, navBarHeight, padding} from "../../style";
import PageTurningBar from "../../component/widget/PageTurningBar";
import ScrollableTabView from 'react-native-scrollable-tab-view';
import OrderList from "../../component/page/mine/orders/orderList";
import IncomeDetailList from "../../component/page/mine/income/incomeDetailList";
import {Actions} from "react-native-router-flux";
import {inject, observer} from "mobx-react/custom";
import {IncomeStore} from "../../store/modules/user/income";
import {Store} from "../../store";
import showLoading = global.showLoading;
import toast from "../../component/common/ToastProxy";
import {defaultObj} from "../../util";
import {alertProxy} from "../../component/common/AlertProxy";

interface IncomeProps extends Store {

}

interface IncomeState {

}


@inject("income", "user", "realInfo")
@observer
export default class Income extends Component<IncomeProps, IncomeState> {

    income: IncomeStore;

    constructor(props: IncomeProps) {
        super(props);
        this.income = this.props.income;
    }

    static onEnter() {
        Actions.refresh({enterTime: new Date()});
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps !== this.props) {
            this.refresh();
        }
    }

    async refresh() {
        await Promise.all([
            this.income.getIncomeProfileByUserId(),
            this.props.realInfo.getUserRealInfo(),
        ]);
    }

    async componentDidMount() {
        global.showLoading();
        await this.refresh();
        global.hideLoading();

    }

    goWithDraw = () => {
        const realInfo = this.props.realInfo.userRealInfo.realInfo || defaultObj;
        if (realInfo.status === 2) {
            Actions.push("WithDraw");
        } else if (realInfo.status === 1) {
            toast("资料审核中...")
        } else {
            Actions.push("Verified")
        }
    };

    _renderHeader() {
        let {integral = 0, notAllowWithDrawnIntegral = 0, withDrawnIntegral = 0} = this.income.incomeProfile;
        if (!integral) integral = 0;
        return (
            <View style={[IncomeStyle.header]}>
                <View style={[IncomeStyle.rowStyle, padding(25, 0)]}>
                    <LabelWithValue style={IncomeStyle.labelWithValue} label={"总积分"} value={`${integral}`}/>
                    <View style={IncomeStyle.labelWithValueContainer}>
                        <LabelWithValue label={"可提现积分"} value={`${withDrawnIntegral}`}/>
                        <LabelWithValue label={"消费积分"} value={`${notAllowWithDrawnIntegral}`}/>
                    </View>

                </View>
                <TouchableOpacity style={[padding(7, 21), {
                    borderRadius: 2,
                    alignSelf: "center",
                    marginBottom: 26
                }, border(1, "#fff")]} onPress={this.goWithDraw}>
                    <Text style={IncomeStyle.btnTextStyle}>我要提现</Text>
                </TouchableOpacity>
            </View>
        )
    }


    _renderContent() {
        const {todayIncome = 0} = this.income.incomeProfile;
        const topTabs = [{name: "收益明细", tag: "ALL"}, {name: `今日收益 ${todayIncome}`, tag: "TODAY"}];
        return (<ScrollableTabView
            locked={true}
            style={{flex: 1}}
            renderTabBar={() => <PageTurningBar activeTextColor={"#629B36"}
                                                inactiveTextColor={"#666666"}
                                                style={{height: 44, backgroundColor: "#fff", borderWidth: 0}}
                                                itemWidth={80} textStyle={{fontSize: 14}}
                                                underlineStyle={{backgroundColor: "#E7F3DE"}}/>}>
            {topTabs.map((data, index) => {
                return <IncomeDetailList index={index} tag={data.tag} key={data.name} tabLabel={data.name}/>
            })}
        </ScrollableTabView>)
    }

    render() {
        return (<View style={IncomeStyle.container}>
            {this._renderHeader()}
            {this._renderContent()}
        </View>)
    }
}

const IncomeStyle = StyleSheet.create({
    container: {flex: 1},
    header: {
        paddingTop: navBarHeight,
        backgroundColor: "#629B36"
    },
    rowStyle: {
        flexDirection: "row",
        alignItems: "center"
    },
    labelWithValue: {
        paddingHorizontal: 20,
        flex: 2
    }, labelWithValueContainer: {
        flex: 3,
        paddingHorizontal: 20
    },
    btnTextStyle: {
        fontSize: 12,
        color: "#fff"
    }
});

 